<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo dy{
				height: 100000000px;
				background-image: url(img/蜡笔小新.png);
				background-size: contain;
				/*函数  cover 等比例放大图片   特点：原图按照比例放大存背景空间
				       【开发者：背景图大小是否等于背景空间】
				       contain 等比例放大图片 特点：图片按照比例缩放存背景空间
					    【开发者：背景图等比例显示在背景空间】
						*/
					   /*背景附件--尺寸中存在cover或者contain*/
					   background-attachment:fixed ;/*背景图固定*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/蜡笔小新.png);
				/*问题：超大图-不显示  小图-显示
				注意：背景空间大小，如果图小于背景空间---平铺*/
				background-repeat: no-repeat;
				/*no-repeat不平铺  repeat-x，y 横，纵向平铺;*/
				background-size: 30%;
				/*背景尺寸属性值：数值px % 丨 函数 cover  contain*/
				/*背景定位：背景空间大于背景图*/
				background-position:80% 50%; 
			}
		</style>
	</head>
	<body>
		<!--html img图片  引入一张图片，为之不可随意变
		css 背景图片 引入一张图片，位置可以随意改变
		子属性 background-color 背景颜色
		      background-image 背景图
			 background-repeat 背景重复
			  background-size  背景尺寸
			  background-attachment  背景附件
			  background-position    背景定位
		复合属性 background :background-image  background-color background-position
		         backg-size  background-repeat和background-attachment
		简写属性 background：background-image background-position| background-size background-repeat；
		替代子属性 background-image background-color background-repeat-->
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam illum temporibus in consectetur blanditiis molestias ipsam iure ratione neque deleniti, repellendus, accusamus similique beatae quis. Officiis animi facere corrupti inventore.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque deleniti nesciunt quod consequuntur qui consectetur voluptate eum corporis, reiciendis mollitia itaque soluta adipisci fuga minima deserunt explicabo. In, esse porro.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae debitis ducimus facere, fuga voluptatum facilis quaerat molestiae voluptates obcaecati quasi aperiam exercitationem recusandae tempore quas, explicabo fugit quam? Ab, distinctio!
		
		<div></div>
	</body>
</html>